<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中使用animate.css库</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<style>
			/* .fade-enter{
				opacity: 0;
			} */
			
			/* .fade-leave{
				/* 这时候的opacity是1 */
				/* opacity: 0; */
			/* }			 */ 
			/* .fade-leave-to{
				opacity: 0;
			} */

			@keyframes bounce-in {
				0%{
					transform:scale(0);
				}
				50%{
					transform:scale(1.5);
				}
				100%{
					transform:scale(1);
				}
			}

			.active{
				transform-origin:left center;
				animation: bounce-in 1s;
			}			
			.leave{
				transform-origin:left center;
				animation: bounce-in 1s reverse;
			}			
			/* 如果transition中不写name，默认的css标签是v-xxxx */
		</style>
	</head>
	<body>
		
		<div id="root">
		<!-- 如果transition中不写name，默认的css标签是v-xxxx -->
			<transition name="fade" enter-active-class="active" leave-active-class="leave">
					<!-- v-show="show"也可以 -->
					<div v-if="show">hello world</div>
			</transition>
            
            <button @click="handleBtnClick">toggle</button>
		</div>
	<script type="text/javascript">	
		var app=new Vue({
			el:'#root',
			data:{
                show:true
			},
			methods: {
				handleBtnClick:function(){
					this.show=!this.show
				}
			},
		})
		
	</script>
	</body>
</html>
